<template>
  <el-card class="demo-card">
    <template #header>
      <h3>表单组件</h3>
    </template>
    <div>组件描述</div>
  </el-card>
  <ElCollapse accordion v-model="activeKey">
    <ElCollapseItem title="基础表单" name="basis">
      <div class="description">
        <p>基本表单组件，基于element-plus二次封装</p>
        <p>
          核心配置：通过<code>formItems: Array</code
          >数组配置表单项，每个表单项支持
          <code>label</code
          >、<code>prop</code>、<code>type</code>（用于指定使用什么组件）等所有<ElLink
            type="primary"
            underline="never"
            href="https://element-plus.org/zh-CN/component/form.html#formitem-attributes"
            target="_blank"
            >ElFormItem
            <ElIcon
              class="el-icon--right iconfont icon-fenxiang"
            ></ElIcon></ElLink
          >支持的属性。
        </p>
        <p>通过绑定<code>v-model</code>实时获取数据。</p>
        <p>
          可通过<code>fieldChange: (prop,value,item)=>void</code
          >事件来监听每一个字段的变化，更多配置请参考<ElLink
            type="primary"
            underline="never"
            @click="activeKey = 'componentProps'"
            >组件属性
          </ElLink>
        </p>
      </div>
      <ElButton @click="handleSetValue">赋值</ElButton>
      <Form
        :formItems="formItems"
        labelWidth="100px"
        v-model="formData"
        @fieldChange="handleFieldChange"
        @fieldChange:name="handleFieldChange"
        @submit="handleSubmit"
      >
      </Form>
    </ElCollapseItem>
    <ElCollapseItem title="表单校验" name="formValidate">
      <div class="description">
        <p>
          校验触发：表单项可直接配置<code
            >rule: RuleItem | Array&lt;RuleItem&gt;</code
          >，（ElForm的rule配置方式），也可以配置<code
            >validator: (rule: any, value: any, callback: any)=>void</code
          >函数进行触发，通过配置<code>triggerValidate: boolean</code
          >控制提交时是否触发表单校验（默认 true）。
        </p>
        <p>
          事件反馈：<code
            >submit: (isValidate: boolean, rules: Array|null)=>void</code
          >事件返回校验状态<code>isValidate</code>和规则<code>rules</code>（校验不通过的数据，成功则为空）。
        </p>
        <p>
          必填标记：表单项直接配置 <code>required: true</code> 实现必填校验。
        </p>
        <p>
          更多配置请参考<ElLink
            type="primary"
            underline="never"
            @click="activeKey = 'componentProps'"
            >组件属性
          </ElLink>
        </p>
      </div>
      提交触发校验:
      <ElSegmented
        v-model="submitValidate"
        :options="[
          { label: '是', value: true },
          { label: '否', value: false },
        ]"
      />
      <Form
        v-model="formData"
        :formItems="formValidate"
        :triggerValidate="submitValidate"
      ></Form>
    </ElCollapseItem>
    <ElCollapseItem title="动态表单" name="dynamicsForm">
      <div class="description">
        <p>
          字段联动：可通过配置项的<code>dependencies: Object</code
          >实现字段间动态交互，可包含属性,<code
            >triggerFields: Array&lt;string&gt;</code
          >触发字段集合、<code>show: (prop,value,formData)=> boolean</code
          >控制显示、<code>disabled: (prop,value,formData)=> boolean</code
          >控制禁用、<code
            >rules: (prop,value,formData)=> RuleItem |
            Array&lt;RuleItem&gt;</code
          >控制校验条件、<code>required: (prop,value,formData)=> boolean</code
          >控制必填
        </p>
        <p>
          更多配置请参考<ElLink
            type="primary"
            underline="never"
            @click="activeKey = 'componentProps'"
            >组件属性
          </ElLink>
        </p>
      </div>
      <ElButton @click="handleClick">动态添加</ElButton>
      <Form :formItems="dynamicsForm" v-model="formData" />
    </ElCollapseItem>
    <ElCollapseItem title="自定义渲染" name="customRender">
      <div class="description">
        <p>
          灵活渲染方式： 通过配置项<code
            >render: (h,item)=>VNode | React.JSX</code
          >渲染自定义组件，
          <code>prefix: (h,item)=>VNode | React.JSX</code>前置渲染，<code
            >suffix: (h,item)=>VNode | React.JSX</code
          >后置渲染
        </p>
        <p>
          通过插槽方式：插槽名取自配置的<code>prop</code>属性，<code>prop+Prefix</code>前置插槽，<code>prop+Suffix</code>后置插槽，<code>prop+Label</code>Label插槽会覆盖help提示信息（组件属性介绍）和冒号，这些插槽都要个参数<code>formItem</code>当前行配置，<code>actions</code>操作按钮插槽
        </p>
        <p>
          更多配置请参考<ElLink
            type="primary"
            underline="never"
            @click="activeKey = 'componentProps'"
            >组件属性
          </ElLink>
        </p>
      </div>
      <Form :formItems="customRenderForm" v-model="formData">
        <template #input222Prefix> 插槽前缀 </template>
        <template #input222>
          <ElInput v-model="formData.input222" placeholder="插槽渲染内容" />
        </template>
        <template #input222Suffix> 插槽后缀 </template>
      </Form>
    </ElCollapseItem>
    <ElCollapseItem title="自定义布局" name="customLayout">
      <div class="description">
        <p>
          网格布局：通过<code>columns: number</code>控制每行列数（默认
          3），结合内置 Grid
          类样式：在class配置<code>col-start-{number}</code>与<code>col-span-{number}</code>，number为1-12，分别对应
          <ElLink
            type="primary"
            underline="never"
            href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start"
            target="_blank"
            >grid-column-start
            <ElIcon class="el-icon--right iconfont icon-fenxiang"></ElIcon
          ></ElLink>
          和
          <ElLink
            type="primary"
            underline="never"
            href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column"
            target="_blank"
            >grid-column
            <ElIcon
              class="el-icon--right iconfont icon-fenxiang"
            ></ElIcon></ElLink
          >。
        </p>
        <p>间距控制：<code>gaps: number|string</code>调整行间距。</p>
        <p>
          折叠功能：<code>isCollapse: boolean</code> 启用折叠，<code
            >collapseRows :number</code
          >设置折叠时显示的行数
        </p>
        <p>
          更多配置请参考<ElLink
            type="primary"
            underline="never"
            @click="activeKey = 'componentProps'"
            >组件属性
          </ElLink>
        </p>
      </div>
      <Form :formItems="customLayoutForm" v-model="formData"> </Form>
    </ElCollapseItem>
    <ElCollapseItem title="组件属性" name="componentProps">
      <div class="component-props">
        <div>
          <h3>Form Attributes</h3>
          <PropsTable :data="formAttrs" />
        </div>
        <div>
          <div style="display: flex; gap: 10px; align-items: center">
            <h3 id="formItems">
              FormItems
              <ElPopover
                title="类型：ElFormItem属性+自定义属性"
                placement="top"
                width="600"
              >
                <pre style="font-size: 16px; font-family: inherit">
Partial&lt;FormItemProps&gt; & {
    class?: string,
    visible?: boolean,
    type?: string,
    defaultValue?: any,
    componentProps?: object | null,
    subComponentProps?: object | null,
    help?: string,
    url?: string | (keyword:string,item:FormItems)=>string,
    render?: (h,item: FormItems) => VNode | React.JSX,
    prefix?: (h,item: FormItems) => VNode | React.JSX,
    suffix?: (h,item: FormItems) => VNode | React.JSX,
    validator?: (rule: any, value: any, callback: any)=>void,
    dependencies?:{
        triggerFields: string[],
        show?: (prop:string,value:any,formData:object)=> boolean,
        disabled?: (prop,value:any,formData:object)=> boolean,
        rules?: (prop:string,value,formData:object)=> RuleItem | Array&lt;RuleItem&gt;,
        required?: (prop:string,value:any,formData:object)=> boolean,
    }
}
      </pre
                >
                <template #reference>
                  <ElIcon>
                    <Warning />
                  </ElIcon>
                </template>
              </ElPopover>
            </h3>
          </div>
          <PropsTable :data="formItemsData" />
        </div>
        <div>
          <h3>Form Events</h3>
          <PropsTable :data="formEvents" prop="事件名称" />
        </div>
        <div>
          <h3>Form Slots</h3>
          <PropsTable :data="formSlots" prop="插槽名称" />
        </div>
        <div>
          <h3>Form Exposes</h3>
          <p>
            与
            <ElLink
              type="primary"
              underline="never"
              href="https://element-plus.org/zh-CN/component/form.html#form-exposes"
              target="_blank"
              >ElForm Exposes
              <ElIcon class="el-icon--right iconfont icon-fenxiang"></ElIcon
            ></ElLink>
            一致
          </p>
        </div>
      </div>
    </ElCollapseItem>
  </ElCollapse>
</template>

<script setup lang="jsx">
import Form from "@/components/Basic/Form/index.vue";
import openDialog from "@/components/Basic/Dialog";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
const activeKey = ref("basis");
const formData = ref({
  name: "李四",
});
const { t } = useI18n();
// attrs
const formAttrs = ref([
  {
    prop: "formItems",
    descritpion: "表单配置对象",
    type: "Array<FormItems>",
    defaultValue: "-",
    required: true,
  },
  {
    prop: "modelValue / v-model",
    descritpion: "表单数据",
    type: "object",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "columns / v-model:columns",
    descritpion: "每行列数",
    type: "object",
    defaultValue: "{}",
    required: false,
  },
  {
    prop: "gap",
    descritpion: "Gird 间距",
    type: "number|string",
    defaultValue: "3",
    required: false,
  },
  {
    prop: "resetText",
    descritpion: "重置文本，为空不显示",
    type: "string",
    defaultValue: t("common.Reset"),
    required: false,
  },
  {
    prop: "submitText",
    descritpion: "提交文本，为空不显示",
    type: "string",
    defaultValue: t("common.Submit"),
    required: false,
  },
  {
    prop: "isCollapse",
    descritpion: "是否可折叠表单",
    type: "boolean",
    defaultValue: "true",
    required: false,
  },
  {
    prop: "collapseRows",
    descritpion: "折叠表单时保留的行数",
    type: "number",
    defaultValue: "1",
    required: false,
  },
  {
    prop: "colon",
    descritpion: "是否显示冒号",
    type: "boolean",
    defaultValue: "false",
    required: false,
  },
  {
    prop: "triggerValidate",
    descritpion: "是否提交时触发校验",
    type: "boolean",
    defaultValue: "true",
    required: false,
  },
  {
    prop: "enterSubmit",
    descritpion: "是否在表单上输入框按下回车键时提交表单",
    type: "boolean",
    defaultValue: "true",
    required: false,
  },
]);
// formItems
const formItemsData = ref([
  {
    prop: "class",
    descritpion:
      "formItem的类样式，内置 col-start-number 与 col-span-number，number为1-12",
    type: "string| object | Array<string>",
    defaultValue: "-",
    required: false,
  },
  // {
  //   prop: "visible",
  //   descritpion: "visible",
  //   type: "",
  //   defaultValue: "-",
  //   required: false,
  // },
  {
    prop: "type",
    descritpion: "组件类型",
    type: "input | select | datePicker所有type | number | radio | checkbox | switch | rate | slider | treeSelect | cascader | upload | time",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "defaultValue",
    descritpion: "默认值，重置时和初次赋值为该值",
    type: "any",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "componentProps",
    descritpion: "组件属性",
    type: "object | null",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "subComponentProps",
    descritpion: "子组件属性 如 el-select 的 el-options",
    type: "object | null",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "help",
    descritpion: "提示信息，在label旁显示感叹号",
    type: "string",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "url",
    descritpion: "远程搜索",
    type: "string | (keyword:string,item:FormItem) => string",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "render",
    descritpion: "自定义渲染",
    type: "(h,item:FormItem) => VNode | React.JSX",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "prefix",
    descritpion: "自定义渲染前缀",
    type: "(h,item:FormItem) => VNode | React.JSX",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "suffix",
    descritpion: "自定义渲染后缀",
    type: "(h,item:FormItem) => VNode | React.JSX",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "validator",
    descritpion: "验证函数",
    type: "(rule: any, value: any, callback: any) => void",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies",
    descritpion: "依赖配置",
    type: "object",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies.triggerFields",
    descritpion: "依赖字段，只有这些字段值变动时，才会触发以下配置函数",
    type: "Array<string>",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies.show",
    descritpion: "动态控制显示",
    type: "(prop:string, value:any, formData:object) => boolean",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies.disabled",
    descritpion: "动态控制禁用",
    type: "(prop:string, value:any, formData:object) => boolean",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies.rules",
    descritpion: "动态控制验证条件",
    type: "(prop:string, value:any, formData:object) => RuleItem|Array<RuleItem>",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "dependencies.required",
    descritpion: "动态控制必填",
    type: "(prop:string, value:any, formData:object) => boolean",
    defaultValue: "-",
    required: false,
  },
]);
// 事件
const formEvents = ref([
  {
    prop: "fieldChange",
    descritpion: "字段值改变触发",
    type: "(field, value,item) => void",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "submit",
    descritpion: "提交触发",
    type: "(isValidate, rules) => void",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "reset",
    descritpion: "重置触发",
    type: "() => void",
    defaultValue: "-",
    required: false,
  },
]);
// 插槽
const formSlots = ref([
  {
    prop: "prop",
    descritpion: "prop为formItem中配置的所有prop（以下插槽也是如此）",
    type: "-",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "prop + Label",
    descritpion: "label插槽",
    type: "-",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "prop + Prefix",
    descritpion: "前缀插槽",
    type: "-",
    defaultValue: "-",
    required: false,
  },
  {
    prop: "prop + Suffix",
    descritpion: "后缀插槽",
    type: "-",
    defaultValue: "-",
    required: false,
  },
]);

const PropsTable = {
  setup(_, { attrs }) {
    return () => (
      <ElTable data={attrs.data}>
        <ElTableColumn label={attrs.prop || "属性"} prop="prop"></ElTableColumn>
        <ElTableColumn label="说明" prop="descritpion"></ElTableColumn>
        <ElTableColumn label="类型" prop="type">
          {{
            default: ({ row }) => <code>{row.type}</code>,
          }}
        </ElTableColumn>
        <ElTableColumn
          label="默认值"
          prop="defaultValue"
          width="75"
        ></ElTableColumn>
        <ElTableColumn label="是否必须" prop="required" width="90">
          {{
            default: ({ row }) => (
              <ElTag type={row.required ? "success" : "info"}>
                {row.required ? "是" : "否"}
              </ElTag>
            ),
          }}
        </ElTableColumn>
      </ElTable>
    );
  },
};
// 示例
const formItems = ref([
  {
    label: "输入框",
    prop: "input",
    type: "input",
    required: true,
    help: "提示信息",
    defaultValue: "默认值",
  },
  {
    label: "下拉框",
    prop: "select",
    type: "select",
    options: [
      {
        label: "选项1",
        value: 1,
      },
      {
        label: "选项2",
        value: 2,
      },
      {
        label: "选项3",
        value: 3,
      },
    ],
  },
  {
    label: "日期",
    prop: "date",
    type: "date",
  },
  {
    label: "日期范围",
    prop: "daterange",
    type: "daterange",
  },
  {
    label: "数字输入框",
    prop: "inputNumber",
    type: "number",
    defaultValue: 16,
  },
  {
    label: "单选框",
    prop: "radio",
    type: "radio",
    required: true,
    options: [
      {
        label: "选项1",
        value: 1,
      },
      {
        label: "选项1",
        value: 2,
      },
    ],
  },
  {
    label: "复选框",
    prop: "checkbox",
    type: "checkbox",
    defaultValue: [],
    options: [
      {
        label: "选项1",
        value: 1,
      },
      {
        label: "选项2",
        value: 2,
      },
    ],
  },
  {
    label: "开关",
    prop: "switch",
    type: "switch",
  },
  {
    label: "滑块",
    prop: "slider",
    type: "slider",
  },
  {
    label: "树型选择",
    prop: "treeSelect",
    type: "treeSelect",
    options: [
      {
        value: "1",
        label: "Level one 1",
        children: [
          {
            value: "1-1",
            label: "Level two 1-1",
            children: [
              {
                value: "1-1-1",
                label: "Level three 1-1-1",
              },
            ],
          },
        ],
      },
      {
        value: "2",
        label: "Level one 2",
        children: [
          {
            value: "2-1",
            label: "Level two 2-1",
            children: [
              {
                value: "2-1-1",
                label: "Level three 2-1-1",
              },
            ],
          },
          {
            value: "2-2",
            label: "Level two 2-2",
            children: [
              {
                value: "2-2-1",
                label: "Level three 2-2-1",
              },
            ],
          },
        ],
      },
      {
        value: "3",
        label: "Level one 3",
        children: [
          {
            value: "3-1",
            label: "Level two 3-1",
            children: [
              {
                value: "3-1-1",
                label: "Level three 3-1-1",
              },
            ],
          },
          {
            value: "3-2",
            label: "Level two 3-2",
            children: [
              {
                value: "3-2-1",
                label: "Level three 3-2-1",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    label: "级联选择",
    prop: "cascader",
    type: "cascader",
    options: [
      {
        value: "guide",
        label: "Guide",
        children: [
          {
            value: "disciplines",
            label: "Disciplines",
            children: [
              {
                value: "consistency",
                label: "Consistency",
              },
              {
                value: "feedback",
                label: "Feedback",
              },
              {
                value: "efficiency",
                label: "Efficiency",
              },
              {
                value: "controllability",
                label: "Controllability",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "side nav",
                label: "Side Navigation",
              },
              {
                value: "top nav",
                label: "Top Navigation",
              },
            ],
          },
        ],
      },
      {
        value: "component",
        label: "Component",
        children: [
          {
            value: "basic",
            label: "Basic",
            children: [
              {
                value: "layout",
                label: "Layout",
              },
              {
                value: "color",
                label: "Color",
              },
              {
                value: "typography",
                label: "Typography",
              },
              {
                value: "icon",
                label: "Icon",
              },
              {
                value: "button",
                label: "Button",
              },
            ],
          },
          {
            value: "form",
            label: "Form",
            children: [
              {
                value: "radio",
                label: "Radio",
              },
              {
                value: "checkbox",
                label: "Checkbox",
              },
              {
                value: "input",
                label: "Input",
              },
              {
                value: "input-number",
                label: "InputNumber",
              },
              {
                value: "select",
                label: "Select",
              },
              {
                value: "cascader",
                label: "Cascader",
              },
              {
                value: "switch",
                label: "Switch",
              },
              {
                value: "slider",
                label: "Slider",
              },
              {
                value: "time-picker",
                label: "TimePicker",
              },
              {
                value: "date-picker",
                label: "DatePicker",
              },
              {
                value: "datetime-picker",
                label: "DateTimePicker",
              },
              {
                value: "upload",
                label: "Upload",
              },
              {
                value: "rate",
                label: "Rate",
              },
              {
                value: "form",
                label: "Form",
              },
            ],
          },
          {
            value: "data",
            label: "Data",
            children: [
              {
                value: "table",
                label: "Table",
              },
              {
                value: "tag",
                label: "Tag",
              },
              {
                value: "progress",
                label: "Progress",
              },
              {
                value: "tree",
                label: "Tree",
              },
              {
                value: "pagination",
                label: "Pagination",
              },
              {
                value: "badge",
                label: "Badge",
              },
            ],
          },
          {
            value: "notice",
            label: "Notice",
            children: [
              {
                value: "alert",
                label: "Alert",
              },
              {
                value: "loading",
                label: "Loading",
              },
              {
                value: "message",
                label: "Message",
              },
              {
                value: "message-box",
                label: "MessageBox",
              },
              {
                value: "notification",
                label: "Notification",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "menu",
                label: "Menu",
              },
              {
                value: "tabs",
                label: "Tabs",
              },
              {
                value: "breadcrumb",
                label: "Breadcrumb",
              },
              {
                value: "dropdown",
                label: "Dropdown",
              },
              {
                value: "steps",
                label: "Steps",
              },
            ],
          },
          {
            value: "others",
            label: "Others",
            children: [
              {
                value: "dialog",
                label: "Dialog",
              },
              {
                value: "tooltip",
                label: "Tooltip",
              },
              {
                value: "popover",
                label: "Popover",
              },
              {
                value: "card",
                label: "Card",
              },
              {
                value: "carousel",
                label: "Carousel",
              },
              {
                value: "collapse",
                label: "Collapse",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    label: "时间选择",
    prop: "time",
    type: "time",
  },
  {
    label: "评分",
    prop: "rate",
    type: "rate",
  },
  {
    label: "上传",
    prop: "upload",
    type: "upload",
    componentProps: {
      drag: true,
    },
  },
]);
const submitValidate = ref(true);
const formValidate = ref([
  {
    label: "输入框",
    prop: "input",
    type: "input",
    required: true,
    help: "提示信息",
    defaultValue: "默认值",
  },
  {
    label: "自定义Rule验证",
    prop: "input1",
    type: "input",
    required: true,
    defaultValue: "默认值166",
    rule: { min: 3, max: 5, message: "最少三位,最长五位", trigger: "blur" },
  },
  {
    label: "自定义validator验证",
    prop: "input2",
    type: "input",
    required: true,
    validator: (rule, value, callback) => {
      // 邮箱
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    },
  },
]);
const dynamicsForm = ref([
  {
    label: "该值变化触发联动",
    prop: "input6666",
    type: "input",
    required: true,
    help: "长度大于5禁用下一项，大于10隐藏下一项",
    defaultValue: "默认值",
  },
  {
    label: "输入框",
    prop: "input111",
    type: "input",
    dependencies: {
      triggerFields: ["input6666"],
      disabled(prop, value) {
        return value.length > 5;
      },
      show(prop, value) {
        return value.length < 10;
      },
    },
  },
]);
const customRenderForm = ref([
  {
    label: "自定义渲染(render函数方式)",
    prop: "input",
    type: "input",
    prefix: () => <>自定义前缀</>,
    render: () => (
      <>
        <ElInput
          v-model={formData.value.input}
          placeholder="自定义渲染输入框"
        />
      </>
    ),
    suffix: () => <>自定义后缀</>,
  },
  {
    label: "自定义渲染(插槽)",
    prop: "input222",
    type: "input",
  },
]);
const customLayoutForm = ref([
  {
    label: "输入框1",
    prop: "input1",
    type: "input",
  },
  {
    label: "输入框2",
    prop: "input2",
    type: "input",
  },
  {
    label: "输入框3",
    prop: "input3",
    type: "input",
  },
  {
    render: () => <ElDivider>分割线</ElDivider>,
    class: "col-span-3",
  },
  {
    label: "输入框4",
    prop: "input4",
    type: "input",
  },
  {
    label: "输入框5",
    prop: "input5",
    type: "input",
    class: "col-start-3",
  },
]);

function handleClick() {
  const cur = dynamicsForm.value.length + 1;
  dynamicsForm.value.push({
    label: `field${cur}`,
    prop: `field${cur}`,
    type: "input",
    defaultValue: `field${cur}`,
  });
}

function handleSetValue() {
  formData.value = {
    input: "张三",
    select: 1,
    date: "2025-07-03",
    number: 18,
    radio: 1,
  };
}

function handleFieldChange(prop, value) {
  ElMessage.success(`${prop}：${value}`);
}
function handleSubmit() {
  openDialog(
    "提交数据",
    <>
      <pre style="font-size: 16px;font-family: inherit;">
        {JSON.stringify(formData.value, null, 2)}
      </pre>
    </>
  );
}
</script>

<style scoped>
.el-collapse-item :deep(.el-collapse-item__title) {
  font-size: 1rem;
  font-weight: bold;
}

.form-container {
  border: 1px solid var(--border-color);
  margin: 10px 0;
  border-radius: var(--baseBorderRadius);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.component-props > div {
  margin: 15px 0;
}
.component-props h3 {
  font-size: 1.2rem;
}
</style>
